<template>
  <div class="login_container">
    <a-card title="注册账号" :bordered="true" style="width: 300px;margin:0 auto;position: absolute;transform: translate3d(-50%,-50%,0);
    top:50%;left:50%;background: #f9f9f9;">
      <a @click="$router.push({name: 'Login'})" slot="extra">登录</a>
      <a-form
        id="components-form-demo-normal-login"
        :form="form"
        class="login-form"
        @submit="handleSubmit"
      >
        <a-form-item>
          <a-input
            v-decorator="[
          'name',
          { rules: [{ required: true, message: '请输入您的用户名!' }] }
        ]"
            placeholder="用户名"
          >
            <a-icon
              slot="prefix"
              type="user"
              style="color: rgba(0,0,0,.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
          'password',
          { rules: [{ required: true, message: '请输入您的密码' }] }
        ]"
            type="password"
            placeholder="密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0,0,0,.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-input
            v-decorator="[
          'repassword',
          { rules: [{ required: true, message: '请输入您确认的密码' }] }
        ]"
            type="password"
            placeholder="确认密码"
          >
            <a-icon
              slot="prefix"
              type="lock"
              style="color: rgba(0,0,0,.25)"
            />
          </a-input>
        </a-form-item>
        <a-form-item>
          <a-button
            type="primary"
            html-type="submit"
            class="login-form-button"
          >
            注册
          </a-button>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'Register',
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  data () {
    return {
      name: null,
      password: null
    }
  },
  methods: {
    handleSubmit (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
        }
        this.postUserAccount(values)
      })
    },
    postUserAccount (values) {
      this.$axios.post('/users/add_user', values).then(res => {
        this.$message.success('注册成功,为您前往登录',1, () => {
          this.$router.push({name: 'Login'})
        })
      }).catch(err =>{
        this.$message.success('请求出错，请稍后重试',1, () => {

        })
        console.error(err);
      });

    }
  },
  mounted () {
    $('.login_container').jParticle({
      background: 'rgba(2,5,31,1)',
      color: 'rgb(17,60,119)',
      particlesNumber: 250,
      particle: {
        minSize: 1,
        maxSize: 3,
        speed: 30
      }
    })
  }
}
</script>

<style lang="less">
  html,body{
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .login_container{
    width: 100%;
    height: 100%;
  }
</style>
